// 1. 使用Commonjs的模块化规范 ---> 这个在 es2015下不会有错
const {add, mul} = require('./mathUtils.js');

console.log('20+30=', add(20, 30))
console.log('10*10=', mul(10, 10))


// 2. 使用ES6的模块化的规范
import {name, age, height} from './info'
console.log('name=', name)
console.log('age=', age)
console.log('height=', height)


// 3. 添加 css 文件
// 以下2个都支持
import '../css/normal.css'
// require('../css/normal.css')

// 4. 添加依赖 less 文件
require('../css/special.less')


import Vue from 'vue'

const app = new Vue({
  el: '#app',
  template: `
    <div>
      <h2>{{message}}</h2>
      <button @click='btnClick'>按钮</button>
      <h2>{{name}}</h2>
    </div>
  `,
  data: {
    message: 'hello webpack',
    name: 'srx'
  },
  methods: {
    btnClick() {
      console.log('按钮被点击了')
    }
  }
})


/**
 *  新内容  Vue({中})：
 *
 *  有 el  和  template
 *  那么  template模板中的内容，会替换掉 el中的内容
 *
 */